<script>
export default { name: 'Home' };
</script>

<script setup>
import Banner from '@/components/Banner.vue'
</script>

<template>
  <div class="home-wrap">
    <div class="container">
      <Banner>
        <template v-slot:bg>
          <img class="banner-bg" src="@/assets/img/home/banner_bg.png" />
        </template>
      </Banner>

      <div class="content">
        <RouterLink to="/exercise" class="content-item">
          <div class="item-img-wrap">
            <img class="item-img" src="@/assets/img/home/exercise.png" />
          </div>
          <div class="item-cont">
            <div class="item-title">演练系统</div>
            <div class="item-desc">提供产品故障演练能力、运维产品力及用户业务稳定性评测</div>
          </div>
        </RouterLink>

        <RouterLink to="/demo" class="content-item">
          <div class="item-img-wrap">
            <img class="item-img" src="@/assets/img/home/demo.png" />
          </div>
          <div class="item-cont">
            <div class="item-title">产品demo系统</div>
            <div class="item-desc">联盟厂商产品demo体验</div>
          </div>
        </RouterLink>

        <RouterLink to="/about" class="content-item">
          <div class="item-img-wrap">
            <img class="item-img" src="@/assets/img/home/about.png" />
          </div>
          <div class="item-cont">
            <div class="item-title">联盟介绍</div>
            <div class="item-desc">与运维生态及合作伙伴一起，共同打造面向未来的产业联盟推动技术发展和创新，促进产业繁荣</div>
          </div>
        </RouterLink>

        <RouterLink to="/document" class="content-item">
          <div class="item-img-wrap">
            <img class="item-img" src="@/assets/img/home/document.png" />
          </div>
          <div class="item-cont">
            <div class="item-title">运维文档</div>
            <div class="item-desc">运维领先技术及产品发布，产业报告发布</div>
          </div>
        </RouterLink>

        <RouterLink to="/activity" class="content-item">
          <div class="item-img-wrap">
            <img class="item-img" src="@/assets/img/home/activity.png" />
          </div>
          <div class="item-cont">
            <div class="item-title">通告</div>
            <div class="item-desc">联盟运维会议、活动公告</div>
          </div>
        </RouterLink>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home-wrap {
  background: #F9F9F9;

  .container {
    margin: 0 auto;
    padding: 20px 0;
    width: 1180px;
  }

  .content {
    padding: 60px 0;
  }

  .content-item {
    display: flex;
    background: #FFFFFF;
    border-radius: 6px;
    transition: all 0.3s;

    &+.content-item {
      margin-top: 30px;
    }

    &:hover {
      box-shadow: 0 2px 8px 0 rgba(34,123,255,.36);
    }

    .item-img-wrap {
      width: 306px;
      height: 174px;
      background-color: #00000029;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;

      .item-img {
        max-width: 100%;
        max-height: 100%;
      }
    }

    .item-cont {
      flex: 1;
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .item-title {
      font-family: PingFangSC-Medium;
      font-size: 20px;
      line-height: 28px;
      color: #262626;
      letter-spacing: 0;
      font-weight: 500;
    }

    .item-desc {
      margin-top: 37px;
      font-family: PingFangSC-Regular;
      font-size: 16px;
      line-height: 22px;
      color: #333333;
      letter-spacing: 0;
      font-weight: 400;
    }
  }
}
</style>
